<template>
  <el-form 
    ref="form" 
    :model="form" 
    label-position="top"
    :rules="rules"

    >
    <el-form-item label="文章标题" prop="title">
      <el-input v-model="form.title" placeholder="上传md文件自动获取标题"></el-input>
    </el-form-item>
    <el-form-item label="文章描述" prop="title">
      <el-input v-model="form.des" type="textarea" :rows="2" placeholder="请输入文章描述" clearable  show-word-limit></el-input>
    </el-form-item>
    <el-form-item label="上传md文件">
      <el-upload
        class="upload-demo"
        drag
        :action="baseURL+'/admin/share/uploadMd'"
        :with-credentials='true'
        :auto-upload="false"
        :on-change="fileChange"
        :on-success="fileSuccess"
        ref="uploadMd"
        :limit="1"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-form-item>
    <el-form-item label="上传cover文件">
      <el-upload
        ref="uploadCover"
        :action="baseURL+'/admin/share/uploadCover'"
        :auto-upload="false"
        :with-credentials="true"
        :limit="3"
        multiple
        list-type="picture"
        :on-success="coverSuccess"
        :on-change="coverChange"
      >
        <el-button size="small" type="primary">选取文件</el-button>
      </el-upload>
    </el-form-item>
    <el-button type="primary" @click="submit">发表分享</el-button>
  </el-form>
</template>
 
<script>
export default {
  name: '',
  data(){
    return{
      form:{
        title:"",
        des:"",
        md:"",
        cover:[]
      },
      rules:{
        title:[
          {required:true}
        ],
        des:[
          {required:true}
        ]
      }
    }
  },
  methods:{
    // 文件上传时
    fileChange(file,fileList){
      // 判断状态
      if(file.status!=="ready") return
      // 判断是否md文件
      if(/^(.+)\.md$/.test(file.name)){
        if(!this.form.title){
          this.form.title = RegExp.$1
        }
      }else{
        this.$message.warning("只能上传 .md 文件")
        fileList.pop()
      }
    },
    // 文件上传成功
    fileSuccess(res,file){
      if(res.code) return this.$message.warning(res.mes)
      // 上传cover文件
      this.$refs.uploadCover.submit()
      // md路径
      this.form.md = res.data
    },
    // 提交发表
    submit(){
      // 检验
      this.$refs.form.validate(v=>{
        if(!v) return false
        // 上传md文件
        this.$refs.uploadMd.submit()
      })
    },
    // 封面上传时触发
    coverChange(file,fileList){
      const isJPG = /^image\/(jpeg|png)$/.test(file.raw.type)
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.warning('上传封面图片只能是 JPG/PNG 格式!');
          fileList.pop()
        }
        if (!isLt2M) {
          this.$message.warning('上传封面图片大小不能超过 1MB!');
          fileList.pop()
        }
        return isJPG && isLt2M;
    },
    // 封面上传成功
    coverSuccess(res){
      if(res.code) return this.$message.warning(res.mes)
      // 封面信息
      this.form.cover.push(res.data)
      if(this.form.cover.length===3){
        // 发表表单
        this.sharePublish()
      }
    },
    // 发表分享
    async sharePublish(){
      let {data} = await this.$axios.post("/admin/share/uploadShare",{
        title:this.form.title,
        des:this.form.des,
        md:this.form.md,
        cover:this.form.cover
      })
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      // 清空表单
      this.$refs.form.resetFields()
      // 清空上传内容
      this.$refs.uploadMd.clearFiles()
      this.$refs.uploadCover.clearFiles()
      this.form.des = ""
    }

  }
}
</script>

<style scoped lang='less'>
</style>